<template>
  <div class="dv-loading">
    <a-popover :title='titlename' placement="right" color='#02bcfe'>
      <template #content>
        <div class='tooltipfu'>
          <div>{{ popNumAndValue("weight") }}</div>
          <div><span class="iconfont icon-weight"></span></div>
        </div>
        <div class='tooltipfu'>
          <div>{{ popNumAndValue("pressure") }}</div>
          <div><span class="iconfont icon-yaqiang"></span></div>
        </div>
        <div class='tooltipfu'>
          <div>{{ popNumAndValue("temp") }}</div>
          <div><span class="iconfont icon-wenduji"></span></div>
        </div>
        <div class='tooltipfu'>
          <div>{{ popNumAndValue("frequency") }}</div>
          <div><span class="iconfont icon-shijianxuliepinshuaizhuanhuan-xuanzhong"></span></div>
        </div>
      </template>

      <svg width="80px" height="80px">
        <!-- 原有的两个旋转的圆圈，根据新尺寸同比例放大 -->
        <circle cx="40" cy="40" r="32" fill="transparent" stroke-width="4.8" stroke-dasharray="50.265, 50.265"
          stroke="#02bcfe" stroke-linecap="round">
          <animateTransform attributeName="transform" type="rotate" values="0, 40 40;360, 40 40" :dur="animateMin"
            repeatCount="indefinite" />
          <animate attributeName="stroke" :values="color" dur="10s" repeatCount="indefinite" />
        </circle>
        <circle cx="40" cy="40" r="16" fill="transparent" stroke-width="4.8" stroke-dasharray="25.612, 25.612"
          stroke="#3be6cb" stroke-linecap="round">
          <animateTransform attributeName="transform" type="rotate" values="360, 40 40;0, 40 40" :dur="animateMin"
            repeatCount="indefinite" />
          <animate attributeName="stroke" :values="color" dur="3s" repeatCount="indefinite" />
        </circle>

        <!-- 新增的小圆圈放大到半径为8，位置调整到左上角 -->
        <circle cx="16" cy="16" r="8" fill="#02bcfe" />
        <!-- 更新文本以适应放大的小圆圈，并确保数字1居中 -->
        <text x="16" y="18" font-family="Verdana" font-size="12" fill="#ffffff" text-anchor="middle"
          alignment-baseline="middle">{{ props.num }}</text>
      </svg>
    </a-popover>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue';

// 定义子组件接收的props
const props = defineProps({
  record: Object,
  num: Number,
});
// console.log('record..........', props.record);

const color = ref(props?.record?.color ? props.record.color : '#02bcfe')
const titlename = ref(props?.record?.deviceName)
const animateMin = ref(props?.record?.deviceStatus === 'running' ? '10s' : '0s')
const popNumAndValue = (str: string) => {
  const item = props?.record?.targetedValues.filter(subitem => subitem.dateTypeCode === str);
  return `${item[0]?.value} ${item[0]?.unitName}`
}

</script>

<style lang="less">
.dv-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  .loading-tip {
    font-size: 15px;
  }
}

.tooltipfu {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
</style>
